<template>
  <view class="mine-banner">
    <image
      src="/static/images/mine/default_avatar.png"
      class="mine-banner-image"
      @tap="goToUserInfo"
    />
    <view class="mine-banner-info">
      <template v-if="userInfo">
        <view
          class="mine-banner-info-name"
          @tap="goToUserInfo"
        >
          {{ userInfo.mobilePhone }}
        </view>
        <view class="mine-banner-info-medal">
          <text class="mine-banner-info-medal-label">我的徽章</text>
          <text class="mine-banner-info-medal-number">{{ lightCount }}</text>
          <text>/50</text>
          <view class="mine-banner-info-medal-icons">
            <image
              v-for="(medal, index) in medalPreview"
              :key="medal.id"
              :src="medal.imageUrl"
              class="mine-banner-info-medal-icon"
              :class="{ 'is-first': index === 0 }"
              mode="aspectFill"
            />
          </view>
          <image
            src="/static/images/base/right.png"
            class="mine-banner-info-medal-right"
          />
        </view>
      </template>
      <template v-else>
        <view @tap="goToUserInfo">登录领取20元新人券包</view>
      </template>
    </view>
    <button
      class="signin-button"
      v-if="userInfo"
    >
      签到
    </button>
    <button
      class="auth-button"
      v-else
      @tap="goToUserInfo"
    >
      授权登录
    </button>
  </view>
</template>
<script>
import { mapState, mapGetters } from "vuex"
export default {
  name: "UserBanner",
  computed: {
    ...mapState("user", ["userInfo"]),
    ...mapGetters("user", ["lightCount", "medalPreview"])
  },
  methods: {
    goToUserInfo() {
      if (this.userInfo) {
        uni.navigateTo({
          url: "/pages/customer-center/user-info"
        })
      } else {
        uni.navigateTo({
          url: "/pages/customer-center/auth/auth"
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.mine-banner {
  display: flex;
  align-items: center;
  padding: $uni-spacing-row-base $uni-spacing-row-lg;

  &-image {
    width: 100rpx;
    height: 100rpx;
    margin-right: 20rpx;
  }

  &-info {
    display: flex;
    flex-direction: column;
    flex: 1;

    &-name {
      font-size: $uni-font-size-lg;
      font-weight: bold;
      color: $uni-text-color;
      margin-bottom: $uni-spacing-row-sm;
    }

    &-medal {
      display: flex;
      align-items: center;
      font-size: $uni-font-size-sm;
      color: $uni-text-color-grey;

      &-label {
        color: $uni-text-color-placeholder;
        margin-right: $uni-spacing-row-xs;
      }

      &-number {
        color: $uni-text-color;
      }

      &-icons {
        display: flex;
        align-items: center;
        margin-left: $uni-spacing-row-sm;
        height: 36rpx;
      }

      &-icon {
        width: 36rpx;
        height: 36rpx;
        border-radius: 50%;
        filter: grayscale(100%);
        background-color: rgba(0, 0, 0, 0.06);
        margin-left: -10rpx;
        overflow: hidden;
        &.is-first {
          margin-left: 0;
        }
      }

      &-right {
        width: 30rpx;
        height: 30rpx;
        margin-left: $uni-spacing-row-xs;
      }
    }
  }
}

.signin-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: $uni-bg-color;
  color: $uni-text-color;
  font-size: $uni-font-size-sm;
  border-radius: $uni-border-radius-base;
  padding: $uni-spacing-row-sm $uni-spacing-row-lg;
}

.auth-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: $uni-color-primary;
  color: #fff;
  font-size: $uni-font-size-base;
  border-radius: $uni-border-radius-lg;
  padding: $uni-spacing-row-base;
}
</style>
